<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>代码编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24" class="warp-main" v-if='showWindow'>
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple-light">
          <el-tag type="success" style="height: 36px;line-height: 36px" @click.native="goBack"><i class="el-icon-back"></i>返回
            </el-tag>
          </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light">
         <el-tag type="success" style="height: 36px;line-height: 36px">【{{navPara.glueType}}】任务描述：{{navPara.jobDesc}}</el-tag> 
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light">
            <el-dropdown :hide-on-click="true" @command="handleCommand">
              <span class="el-dropdown-link">
              <el-tag type="success" style="height: 36px;line-height: 36px">版本回溯：{{navPara.versionDesc}}<i class="el-icon-caret-bottom"></i></el-tag>
              </span>
              <el-dropdown-menu slot="dropdown" v-if="showdropdown">
                <el-dropdown-item  v-for="item of navPara.jobLogGlues" :key='item.id' 
                :command=item>{{item.glueType}}({{item.glueRemark}})</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light">
          <el-tag type="success" style="height: 36px;line-height: 36px"><b>Web</b>IDE</el-tag>
        </div></el-col>
      </el-row>
      <el-row>
        <el-col :span="24" >
           <el-form :inline="true" :model="saveForm" ref="saveForm">  
              <template >
                  <codemirror ref="myCm"  :value="saveForm.code"></codemirror>
              </template>
            <el-col :span="24" >
              <el-form-item style="margin-top: 10px"> 
              
                <el-tag type="info" style="height: 36px;line-height: 36px;">版本描述</el-tag>
              </el-form-item>
              <el-form-item style="margin-top: 10px;width: 50%">
                <el-input  v-model="saveForm.versionRemark" style="width: : 300px;"></el-input>
              </el-form-item>
              <el-form-item style="margin-top: 10px">
                <el-button type="primary" @click.native="saveCode">保存</el-button>                    
              </el-form-item>
            </el-col> 
           </el-form>            
        </el-col>        
      </el-row>
    </el-col>


  </el-row>
</template>
<script>
  import echarts from 'echarts'
  import API from '../api/api_code'
  import qs from 'qs'

  require('codemirror/mode/javascript/javascript')
  require('codemirror/mode/vue/vue')
  import 'codemirror/lib/codemirror.css' 
  import "codemirror/mode/groovy/groovy.js"
  // import "codemirror/clike.js"
    // require('codemirror/addon/hint/show-hint.js')
  require('codemirror/addon/hint/show-hint.css')
  require('codemirror/addon/hint/javascript-hint.js')

  export default {
    data() {
      return {
        loading:false,
        navPara:{
          glueType:"",
          jobDesc:"",
          jobLogGlues:[],
          versionDesc:''
        },
        
        showWindow:true,
        showdropdown:true,
        cmOptions:{
          mode: "text/groovy",    //实现groovy代码高亮
          mode: "text/x-java", //实现Java代码高亮
          lineNumbers: true,  //显示行号
          theme: "dracula", //设置主题
          matchBrackets: true,  //括号匹配
        },
        saveForm:{
          id:'',
          code:'hello world',
          versionRemark:'',
        },
        saveFormRules: {
          versionRemark: [
          {required: true, message: '版本备注', trigger: 'blur'},
          { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }

        ]},
        codeModel:{
          java:
`package com.xxl.job.service.handler;

import com.xxl.job.core.log.XxlJobLogger;
import com.xxl.job.core.biz.model.ReturnT;
import com.xxl.job.core.handler.IJobHandler;

public class DemoGlueJobHandler extends IJobHandler {

  @Override
  public ReturnT<String> execute(String param) throws Exception {
    XxlJobLogger.log("XXL-JOB, Hello World.");
    return ReturnT.SUCCESS;
  }

}`,
        shell:
`#!/bin/bash
echo "xxl-job: hello shell"

echo "脚本位置：$0"
echo "任务参数：$1"
echo "分片序号 = $2"
echo "分片总数 = $3"
<#--echo "参数数量：$#"
for param in $*
do
    echo "参数 : $param"
    sleep 1s
done-->

echo "Good bye!"
exit 0`,
        python:
`#!/usr/bin/python
# -*- coding: UTF-8 -*-
import time
import sys

print "xxl-job: hello python"

print "脚本位置：", sys.argv[0]
print "任务参数：", sys.argv[1]
print "分片序号：", sys.argv[2]
print "分片总数：", sys.argv[3]
<#--for i in range(1, len(sys.argv)):
  time.sleep(1)
  print "参数", i, sys.argv[i]-->

print "Good bye!"
exit(0)
<#--
import logging
logging.basicConfig(level=logging.DEBUG)
logging.info("脚本文件：" + sys.argv[0])
-->`,
        nodejs:
`#!/usr/bin/env node
console.log("xxl-job: hello nodejs")

var arguments = process.argv

console.log("脚本位置: " + arguments[1])
console.log("任务参数: " + arguments[2])
console.log("分片序号: " + arguments[3])
console.log("分片总数: " + arguments[4])
<#--for (var i = 2; i < arguments.length; i++){
  console.log("参数 %s = %s", (i-1), arguments[i]);
}-->

console.log("Good bye!")
process.exit(0)`

        }

      };
    },
    methods: {
            //获取统计数据
      getCodeInfo: function () {
      let that = this;
      let para={
        jobId:that.$store.state.glueJobId
      }
      API.getCodeInfo(qs.stringify(para)).then(function (result) {
       console.log(result)
        if (result && result.jobInfo) {
          that.navPara.glueType=result.jobInfo.glueType
          that.navPara.jobDesc=result.jobInfo.jobDesc
          that.navPara.jobLogGlues=result.jobLogGlues
          that.saveForm.id=result.jobInfo.id

          if(that.navPara.jobLogGlues.length>0){
            that.saveForm.code=that.navPara.jobLogGlues[0].glueSource

            that.navPara.versionDesc="版本("+result.jobLogGlues[0].glueRemark+")"
          }else{
            that.showdropdown=false
            that.saveForm.code=that.filterCode(result.jobInfo.glueType)
            console.log("--"+result.jobInfo.glueType)

          }
      
        }
      }, function (err) {
        that.loading = false;
        that.$message.error({showClose: true, message: err.toString(), duration: 2000});
      }).catch(function (error) {
        that.loading = false;
        console.log(error);
        that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
      }); 
      },

      filterCode:function(glueType){
        if(glueType==="BEAN"){
          return ;
        }else if(glueType=="GLUE_GROOVY"){
          return this.codeModel.java
        }else if(glueType=="GLUE_SHELL"){
          return this.codeModel.shell
        }else if(glueType=="GLUE_PYTHON"){
          return this.codeModel.python
        }else if(glueType=="GLUE_NODEJS"){
          return this.codeModel.nodejs
        }

      },
      handleCommand:function(command){
        this.saveForm.code=command.glueSource
        this.saveForm.id=command.jobId
        this.navPara.versionDesc="版本("+command.glueRemark+")"

      },
      saveCode:function(){
        let that = this;
        let para={
                  id : that.saveForm.id,
                  glueSource : that.saveForm.code,
                  glueRemark :that.saveForm.versionRemark
            }
          console.log(qs.stringify(para))
          API.saveCode(qs.stringify(para)).then(function (result) {
            that.loading = false;
            if (result && result.code== 200) {
              that.$message.success({showClose: true, message: '保存成功', duration: 2000});
              that.$refs['saveForm'].resetFields();
              that.getCodeInfo()
            } else {
              that.$message.error({showClose: true, message: '修改失败', duration: 2000});
            }
          }, function (err) {
            that.loading = false;
            that.$message.error({showClose: true, message: err.toString(), duration: 2000});
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
            that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
          });
      },

      goBack:function() {
        this.showWindow=false
        console.log("goback")
        this.$router.go(-1)
      },
    },
    mounted: function () {
      this.getCodeInfo();
    }

  }
</script>


<style lang="stylus" scoped> 
  .warp{

  }
    .warp-main >>> .CodeMirror{
      height:550px;
    }
    .warp-main >>> .CodeMirror-gutters{
      background-color:#F0FFF0;
    }
    .warp-main >>>.el-form--inline .el-form-item__content{
      display:block;
    }
    .warp-breadcrum{

    }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #F0FFF0;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
</style>
